<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Driver Manager</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/o2mation.js"></script>
    <script type="text/javascript">
        var componentId;
        var driver_type;
        function requestComponent(id){
            componentId = id;
            requestLoadComponent(id, 1, function(data, status){
                if(status == 200){
                    var jsoncontent = JSON.parse(data)
                    driver_type = jsoncontent['type'].split('.')
                    driver_type = driver_type[0]
                    comps = jsoncontent['components'];
                    var jslength=0;
                    for(var j in comps){
                        jslength++;
                    } 
                    var total = jslength;
                    if(total > 0){
                        var obj_array = new Array();
                        var obj = {'total': total, 'rows': obj_array}
                        for(i in comps){
                            var comp = comps[i];
                            props = comp['properties'];
                            var name;
                            var address;
                            var enabled;
                            var status;
                            var faultCause; 
                            for(j in props){
                                prop = props[j];
                                if(prop['name'] == 'name'){
                                    name = prop['value'];
                                } else if(prop['name'] == 'address'){
                                    address = prop['value'];
                                } else if(prop['name'] == 'enabled'){
                                    enabled = prop['value'];
                                } else if(prop['name'] == 'status'){
                                    status = prop['value'];
                                } else if(prop['name'] == 'faultCause'){
                                    faultCause = prop['value'];
                                } 
                            }
                            obj_array.push({'name':name, 'address':address, 'enabled':enabled, 'status':status, 'faultCause':faultCause})
                        }
                        $('#database').datagrid('loadData',obj);
                    }
                }
            });
        }
        
        var device_list = new Array();
        var selected_component;

        function new_point(){
            $('#new_dlg').dialog('open');
            console.log(driver_type)
            requestFilterType('control', 'ControlPoint', 'control', function(data, status){
                if(status == 200){
                    var jsoncontent = JSON.parse(data)
                    var m_id = 1;
                    for(key in jsoncontent){
                        device_list.push({'id':m_id++, 'text':jsoncontent[key]});
                    }
                    $('#dlg_device').combobox({
                        textField : 'text',
                        valueField : 'id',
                        data : device_list,
                        onSelect: function(record){
                            select_point(record);
                        }
                    });
                }
            });
        }

        function select_point(record){
            selected_component = record.text;
        }

        function new_folder(){
            
        }

        function remove_point(){
            
        }

        function main(){

        }

        function add_point(){
            if(selected_component == undefined)
            {
                alert("Please select a device!")
                return;
            }
            name=prompt("Input component name");
            if(name == null||name.length == 0||name == 'null')
                return

            requestCreateComponent(componentId, 'control', selected_component, function(data, status){
                if(status == 200){
                    $('#new_dlg').dialog('close');
                } else if( status == 404 ){
                    alert('Failed to add a point!')
                }

            });
        }
    </script>
</head>
<body onload = "main()">
    <h1>Point Manager</h1>
    <div style="margin:20px 0;"></div>
    <div id="new_dlg" class="easyui-dialog" title="New" data-options="iconCls:'icon-save', buttons: '#dlg-buttons', closed:true" style="width:400px;height:400px;padding:10px">
        <input class="easyui-combobox" id="dlg_device" name="Devices" style="width:100%;" data-options="
                        valueField:'id',
                        textField:'text',
                        label: 'Devices:',
                        labelPosition: 'top',
                        onSelect: function(record){
                            select_device(record);
                        }
                        ">
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="add_point()">Ok</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg_device').dialog('close')">Cancel</a>
    </div>
    <table class="easyui-datagrid" id='database'title="Database" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true">
        <thead>
            <tr>
                <th data-options="field:'name',width:80">Name</th>
                <th data-options="field:'address',width:100">Address</th>
                <th data-options="field:'enabled',width:80,align:'right'">Enabled</th>
                <th data-options="field:'status',width:80,align:'right'">Status</th>
                <th data-options="field:'faultCause',width:250">Fault Cause</th>
            </tr>
        </thead>
    </table>
    <div style="margin:20px 0;"></div>
    <button onclick="new_point()">New Point</button>
    <button onclick="new_folder()">New Folder</button>
    <button onclick="remove_point">Remove</button>
</body>
</html>